<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>换界面主题</title>
	<!-- GC -->
	<!-- LIBS -->
	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../extjs/ext-all.js"></script>
	<!-- ENDLIBS -->
	<!-- Theme includes -->
    <link rel="stylesheet" type="text/css" title="blue"      href="../extjs/resources/css/xtheme-blue.css" /> 
    <link rel="stylesheet" type="text/css" title="gray"      href="../extjs/resources/css/xtheme-gray.css" />
    <link rel="stylesheet" type="text/css" title="access"    href="../extjs/resources/css/xtheme-access.css" />
	<script type="text/javascript" src="../extjs/styleswitcher.js"></script>

    <script type="text/javascript" src="../js/switchthemes.js"></script>
</head>
<body>
    <div id="header">
        <form id="styleswitcher">
            <label for="styleswitcher_select">Choose Theme: </label>
            <select name="styleswitcher_select" id="styleswitcher_select">
                <option value="blue" selected>Blue Theme</option>
                <option value="gray">Gray Theme</option>
                <option value="access">Accessibility Theme</option>
            </select>
        </form>
    </div>
    <div id="leftList">
    </div>
</body>
</html>
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<script>
Ext.onReady(function(){
    new Ext.Panel({
        xtype: 'panel',
        width: 150,
        height: 150,
        title: 'Basic Panel',
        bodyStyle: {padding: '5px'},
        html: 'Some content',
		renderTo:'leftList',
        collapsible: true,
        x: 100, y: 200
    });
    //=============================================================
    // Stylesheet Switcher
    //=============================================================
    Ext.get('styleswitcher_select').on('change',function(e,select){
        var name = select[select.selectedIndex].value;
        setActiveStyleSheet(name);
    });
    
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    Ext.get('styleswitcher_select').dom.value=title;
});
</script>
